<template>
	
	<dialog-shell title="用户登录" confirm-text="登录" ref="login" @confirm="confirmLogin">
		<image src="/static/icons(1)/icon.png" class="icon-login"></image>
		<text class="welcome-text">WELCOME</text>
		<text class="info-register" @click="goRegister">没有账号？请注册</text>
		<view class="user">
			<input type="text" :value="userName" @input="inputGetUser"  placeholder="请输入用户名" placeholder-class="input-holder"/>
		</view>
		<view class="password">
			<input v-if="isPwd" type="password" :value="password" @input="inputGetPwd" placeholder="请输入密码" placeholder-class="input-holder" />
			<input v-else="isPwd" type="text" :value="password" @input="inputGetPwd"  placeholder="请输入密码" placeholder-class="input-holder" />
		</view>
		
	</dialog-shell>
	
</template>

<script>
	export default {
		name:"login-dialog",
		data() {
			return {
				isPwd:true,
				userName:"",
				password:""
			};
		},
		methods:{
			goRegister(){
				this.hide();
				uni.navigateTo({
					url: '/pages/register/register'
				});
			},
			confirmLogin(){
			  	if(this.userName.length==0||this.password.length==0){
					uni.showToast({
						title: '请输入用户名密码',
						icon:'none'
					});
					return
				}
				let url= this.$params.host+this.$params.action_login
				let data={
					username:this.userName,
					password:this.password
				}
				uni.showLoading({
					title: '登录中...',
					mask: false
				});
				this.$req.post(url,data,res=>{
					if(!res.data.success){
						uni.showToast({
							title: res.data.message,
							icon:'none'
						});
						this.show()
						return
					}
					let app=getApp()
					app.globalData.id=res.data.data.id
					app.globalData.token=res.data.data.token
					app.globalData.avatar=res.data.data.avatar
					app.globalData.email=res.data.data.email
					app.globalData.nickName=res.data.data.nickName
					app.globalData.userName=res.data.data.userName
					app.globalData.type=res.data.data.type
					this.$emit("login")
				},()=>{
					uni.hideLoading()
				})
			},
			inputGetPwd(e){
			   this.password=e.detail.value	
			},
			inputGetUser(e){
			   this.userName=e.detail.value	
			},
			switchPwd(){
			 this.isPwd=!this.isPwd	
			},
		    show(){
				this.$refs.login.showDialog()
			},
			hide(){
				this.$refs.login.hideDialog()
			}
		}
	}
</script>

<style>
.lgoin-container{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5)
}
/* 应用图标 */
.icon-login {
  width: 150rpx;
  height: 150rpx;
  display: block;
padding-left: 25rpx;
}

/* 欢迎消息 */
.welcome-text {
  font-size: 36rpx;
  
  padding-left: 25rpx;
}

/* 注册提示 */
.info-register {
  font-size: 28rpx;
  color: #1a0dab;
  
  padding-left: 25rpx;
  cursor: pointer;
}

/* 用户名输入框容器 */
.user {
 display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20rpx;
   height: 80rpx;
   border: 1rpx solid #ddd;
   border-radius: 40rpx;
   margin: 20rpx;
}

/* 输入框通用样式 */
.user input,
.password input {
  flex: 1;
  border: none;
  font-size: 30rpx;
}

/* 密码输入框容器 */
.password {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 40rpx;
  margin: 20rpx;
}


/* 登录按钮 */
.login-btn {
  text-align: center;
  font-size: 36rpx;
  color: red;
  height: 100rpx;
  line-height: 100rpx;
   background: #f2f2f2;
  margin: 20rpx;
}
</style>